<template>
    <el-drawer
    :title="this.$t('titles.trajectoryList')"
    :visible.sync="drawer"
    :close-on-press-escape="false"
    custom-class="waypointList"
    :wrapperClosable="closable"
    :show-close="showClose"
    :direction="direction"
    @close="closeDrawer">
        <!-- 轨迹列表 -->
        <div class="trajectoryBox">
            <div class="modulContent">
                <div class="flex searchItem">
                <el-input
                    :placeholder="this.$t('placeholder.content')"
                    v-model="input"
                    class="searchInput"
                    @input="InputChange"
                    clearable>
                    </el-input>
                </div>
                <div class="" v-if="trajectorys.length == 0">暂无轨迹</div>
                <div class="flex dignoseItem" v-for="(item,index) in trajectorys" :key="index" v-else>
                    <div class="iconImg"></div>
                    <div class="name" @click="showTrackDetailBtn(item.name)">{{item.name}}</div>
                    <div class="itemDel flex" @click="delTrackBtn(item.name)" v-show="!develop">
                        <el-button type="text" :disabled="develop"><i class="el-icon-delete iconDel"></i></el-button>
                    </div>
                </div>
            </div>
            <div class="flex formBtns">
                <el-button type="primary" @click="addTrackBtn">{{ this.$t("buttons.addTrajectory")}}</el-button>
            </div>
        </div>
    </el-drawer>
</template>

<script>
import { showTrajectoryList, showTrajectoryAdd, showTrajectoryDetail, showTrackDetail, delTrack } from '../js/trajectory'
export default {
    name: 'stationsComponent',
    components:{

    },
    data(){
        return{
            drawer: this.$store.state.trajectoryModule,
            direction: 'btt',
            closable: true,
            showClose: false,

            input: "",
            trajectorys: [],
            trajectoryList: [],
            develop: false
        }
    },
    methods:{
        //输入框change
        InputChange(){
            let that = this;
            if(that.input){
                that.trajectorys = [];
                for(var i in that.trajectoryList){
                    if(that.trajectoryList[i].name.indexOf(that.input) >= 0){
                        that.trajectorys.push(that.trajectoryList[i])
                    }
                }
            }else{
                that.trajectorys = that.trajectoryList;
            }
        },

        //点击显示轨迹详情
        showTrackDetailBtn:function(name){
            this.drawer = false;
            showTrajectoryDetail(true, name);
        },

        //点击删除轨迹
        delTrackBtn:function(name){
            const that = this;
            if(that.develop){return}
            that.drawer = false;
            that.$confirm(`是否永久删除${name}轨迹?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true,
                customClass: "delBranchCustom"
            }).then(() => {
                delTrack(name);
            }).catch(() => {
                          
            });
        },

        //添加轨迹
        addTrackBtn:function(){
            showTrajectoryList(false);
            showTrajectoryAdd(true);
        },

        //关闭模态框
        closeDrawer: function(){
            showTrajectoryList(false)
        }
    },

    //属性监听
    watch:{
        "$store.state.trajectoryModule": function(val){
           this.drawer = val;
        },

       '$store.state.trajectoryList':function(val){
           this.trajectorys = val;
           this.trajectoryList = val;
       },

       '$store.state.userRole':function(val){
            switch(val){
                case 'developer':
                    this.develop = false;
                break;

                case 'Administrator':
                    this.develop = true;
                break;
                
                default:
                break;
            }
        }
    }

}
</script>

<style scoped lang="less">
 .trajectoryBox{
     padding: 0 15px;
     width: 100%;
    .dignoseItem{
        justify-content: space-between;
        border-bottom: 1px solid #eeeeee;
        .iconImg{
            flex: 1;
            height: 35px;
            background: url('../../src/assets/icon-track-sel.png') no-repeat center;
            background-size: 45%;
        }
        .name{
            flex: 7;
            color: #3f86fe;
            overflow: hidden;
            padding-left: 1em;
            font-size: 16px;
            line-height: 40px;
            height: 40px;
            text-align: center;
        }
        .itemDel{
            flex: 1;
            height: 35px;
            .iconDel{
                font-size: 16px;
                color: #3f86fe;
            }
        }
    }
    .formBtns{
        padding: 0 5px;
        margin-top: 15px;
        button{
            width: 100%;
        }
    }
 }

 .searchInput{
     margin-bottom: 10px;
 }
</style>